<template>
	<div class="footer"><p v-html="footer"></p></div>
</template>

<script>
export default {
	data() {
		return {};
	},
	computed: {
		footer: {
			get() {
				return this.v_system_footer;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.footer {
	text-align: center;
	font-weight: 300;
	padding: px2rem(5px) 0;
	color: $default-title-color;
	border-top: 1px solid $default-border-color;
	background: $default-background-color;
	@media only screen and (max-width: $responsive-sm) {
		font-size: px2rem(9px);
		line-height: px2rem(25px);
	}
	@media screen and (min-width: $responsive-sm) {
		font-size: px2rem(8px);
		line-height: px2rem(15px);
	}
	@media screen and (min-width: $responsive-md) {
		font-size: px2rem(4px);
		padding: px2rem(3px) 0;
		line-height: px2rem(10px);
	}
	p {
		color: $default-title-color;
		a {
			color: $default-link-color;
			&:hover {
				color: $default-link-hover-color;
			}
		}
	}
}
</style>
